<template>
	<view>
		服务评分
		<view class="service">
			<image src="../../static/c1.png" mode=""></image>
			<view>
				小王汽车美容店
				<uni-rate class="uni-rate" v-model="rate" @change="onChange" />
			</view>
		</view>
		评语（0-200字）
		<view class="comment">
			<uni-easyinput type="textarea" v-model="content" placeholder="请写下您的意见和建议..."></uni-easyinput>
		</view>

		<view class="commentImage">
			<uni-file-picker mode="grid" fileMediatype="image" limit="3" title="照片（选填,最多选择3张图片）"
				@select="selectUserImg" />
			<view v-for="(file, index) in imageValue" :key="index">
				<image :src="file.url" mode="aspectFit" />
				<view @click="handleRemove(index)">删除</view>
			</view>
		</view>
		<button class="btnComment" @click="submitForm">提交</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				rate: 0,
				content: '',
				imageValue: [], // 用于存储上传后的图片URL
			};
		},
		methods: {
			onChange(e) {
				this.rate = e.value;
			},
			selectUserImg(e) {
				if (e.tempFiles.length > 0) {
					const tempFile = e.tempFiles[0];
					uni.uploadFile({
						url: 'http://localhost:7000/file/upload',
						filePath: tempFile.path,
						name: 'file',
						formData: {},
						header: {
							authorization: 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImRhZTc3OTJmLWU5YmQtNDhlMS05M2VhLWUzMzY1Y2QxNDRlNyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.x5zqYUrXB05k3IDS5uovyCLXp1n7e0dHeAp2vx-OsXQgQS7G_dhciRlL75zghiBfgY4-xU08p1GqljYkOShI-A', // 替换为你的授权token
						},
						success: (resp) => {
							const res = JSON.parse(resp.data);
							if (resp.statusCode === 200 && res.code === 200 && res.data.url) {
								// 更新图片URL
								this.imageValue.push({
									url: res.data.url
								});
							} else {
								console.error('上传失败，服务器返回错误：', res.msg);
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							console.error('图片上传失败，错误信息：', err);
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						}
					});
				}
			},
			handleRemove(index) {
				this.imageValue.splice(index, 1); // 删除图片
			},
			submitForm() {
				// 提交表单数据
				uni.request({
					url: 'http://localhost/dev-api/user/evaluate',
					method: 'POST',
					header: {
						'authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImRhZTc3OTJmLWU5YmQtNDhlMS05M2VhLWUzMzY1Y2QxNDRlNyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.x5zqYUrXB05k3IDS5uovyCLXp1n7e0dHeAp2vx-OsXQgQS7G_dhciRlL75zghiBfgY4-xU08p1GqljYkOShI-A', // 替换为你的授权token
						'Content-Type': 'application/json'
					},
					data: {
						rate: this.rate,
						content: this.content,
						img: this.imageValue.map(item => item.url) // 发送图片URL数组
					},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '提交失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '提交失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: white;
		padding: 20rpx;
	}

	.service {
		display: flex;
		height: 150rpx;
	}

	.service image {
		width: 150rpx;
		height: 150rpx;
	}

	.service view {
		line-height: 75rpx;
	}

	.btnComment {
		color: white;
		background-color: #1d6fff;
		width: 468rpx;
		margin-top: 150rpx;
	}

	.commentImage image {
		width: 100px;
		height: 100px;
		margin-right: 10px;
	}
</style>